{% extends 'base.html' %}
{% load static %}
{% block tilte %}
    首页
{% endblock %}

{% block mycss %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/welcome.css' %}"/>
{% endblock %}



{% block content %}
    <div class="container-md form-inline" style="margin:0;padding:0">
        <div class=" navbar-left " style="margin:0;padding:0;width:12%;height: 100%">
            <ul class="nav row flex-column" style="margin:0;padding:0;">
                <li class="nav-item" style="">
                    <a class="nav-link active justify-content-end" href="{% url 'shop:type_show' %}">全部分类</a>
                </li>
                {% for type in types %}
                    <li class="nav-item">
                        {% csrf_token %}
                        <a href="#model{{ forloop.counter }}" class="nav-link {{ type.logo }}">{{ type.tname }}</a>
                        <!-- <a class="type_class nav-link justify-content-end "
                           href="javascript:;" tag="{{ type.id }}">{{ type.tname }}</a>
                        -->
                        <!--{#                        <a class="nav-link justify-content-end"#}
{#                           href="{% url 'shop:detail_type' type.id %}">{{ type.tname }}</a>#}
{#                        <a#}
{#                           href="{% url 'shop:delete_type' %}?id={{ type.id }}">删除{{ type.tname }}分类</a>#}-->
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div id="carouselExampleIndicators" class="col-7 carousel slide" data-ride="carousel" style="height:80%">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{% static 'media/banner/sl1.jpg' %}" style="width:100%; height: 100%;"
                         class="d-block w-100"
                         alt="...">
                </div>
                <div class="carousel-item">
                    <img src="{% static 'media/banner/sl2.webp' %}" style="width:100%; height: 100%;"
                         class="d-block w-100"
                         alt="...">
                </div>
                <div class="carousel-item">
                    <img src="{% static 'media/banner/sl3.jfif' %}" style="width:100%; height: 100%;"
                         class="d-block w-100"
                         alt="...">
                </div>
                <div class="carousel-item">
                    <img src="{% static 'media/banner/sl5.jfif' %}" style="width:100%; height: 100%;"
                         class="d-block w-100"
                         alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
                    data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
                    data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </button>
        </div>

        <div class="navbar-right col-3" style="margin:0;padding:0;">
            {% for sale in sales %}
                <a href="{{ sale.url }}"><img src="/static{{ MEDIA_URL }}{{ sale.image }}"
                                              style="width:100%;height:50%;"></a>
            {% endfor %}
        </div>
    </div>
    {% for type in types %}
        <div class="">
            <div class="form-inline">
                <h5 id="model0{{ forloop.counter }}">{{ type.tname }}</h5>

                <span>  |  </span>
                {% for title in type.title_adv %}
                    <a href="{% url 'shop:goods_details' title.goods.id %}">{{ title.goods.name }}</a> &nbsp;&nbsp;
                {% endfor %}


                <a style="float:right" href="#">查看更多</a>
            </div>

            <div class="list-item form-inline" >
                <div style="width:20%;height:150px;"><img style="width:100%;height:100%;" src="/static{{ MEDIA_URL }}{{ type.image }}" alt=""></div>
                <ul class="form-inline" style="width:80%">
                    {% for image_banner in type.image_adv %}
                        <li class="list-group-item" style="width:25%;padding:0">
                            <h5><a href="{% url 'shop:goods_details' image_banner.goods.id %}">{{ image_banner.goods.name }}</a></h5>
                            <a  href="{% url 'shop:goods_details' image_banner.goods.id %}">
                                <img style="width:100%;height:100%;" src="/static{{ MEDIA_URL }}{{ image_banner.goods.image }}" alt="">
                            </a>
                            <div class="bold">￥ {{ image_banner.goods.price }}</div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endfor %}


{% endblock %}

{% block myjs %}
    <script type="text/javascript" charset="utf-8" src="{% static 'js/welcome.js' %}"></script>
{% endblock %}